<template>
    <div class="box">
        <div class="leftBox">
            <img src="/images/icon/img1.png" alt="">
        </div>
        <div class="rightBox">
            <el-row class="infoBox">
                <el-col class="infoT type" :span="24">台账名称:{{name}}</el-col>
                <el-col class="infoT title" :span="24">台账类型:{{preinstallName}}</el-col>
                <el-col class="infoT equipment" :span="24">
                    台账码:{{standBookCode }}
                    价格:{{ price }}
                </el-col>
                <el-col v-if="statusName == '正常'" class="infoT status1" :span="24">状态:{{ statusName }}</el-col>
                <el-col v-else-if="statusName == '维修停机'" class="infoT status2" :span="24">状态:{{ statusName }}</el-col>
                <el-col v-else-if="statusName == '故障停机'" class="infoT status3" :span="24">状态:{{ statusName }}</el-col>
                <el-col class="infoT time1" :span="24">启用时间:{{ startTime }}</el-col>
                <el-col class="infoT time" :span="24">使用时间:{{ usageTime }}</el-col>
            </el-row>
            <div class="icon ">{{propertyTypeName}}</div>
        </div>
    </div>
</template>
<script setup>



defineProps({
    name:String,
    preinstallName:String,
    standBookCode:String,
    price:String,
    startTime:String,
    usageTime:String,
    statusName:String,
    propertyTypeName:String,

})

</script>

<style lang="less" scoped>
    .box{
        width: 100%;
        height: 120px;
        .leftBox{
            float: left;
            img{
                width: 80px;
                height: 110px;
                margin-top: 10px;
            }
        }

        .infoBox{
           
            .infoT{
                height: 20px;
                line-height: 20px;
                margin: 0px;
                color: white;
                padding-left: 10px;
             
            }
            .type{
                margin-top: 10px;
                color: #03d2ec;
            }
            .title{
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .equipment{
                color: #c2c2c2;
            }
            .time1{
                color: rgb(187, 185, 185);
            }
            .time{
                color: rgba(155, 155, 155, 0.836);
            }

            .status1{
                color: #30eb6e;
            }
            .status2{
                color: #ebdf30;
            }
            .status3{
                color: #eb3030;
            }
        }

        .icon{
            position: absolute;
            top: 3%;
            right: 3%;
            z-index: 10;
            background: linear-gradient(0deg,#30eb6e 0%, #70d7f1 100%);
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 1px 5px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
        }
        .icon2{
            background: linear-gradient(0deg,#f76943 0%, #f1bf70 100%) !important;
        }
        
    }


</style>